import Vue from 'vue'
import VueRouter from 'vue-router'
//路由
//静态导入
// import ContainerView from '../views/example/ContainerView.vue'
// import LoginView from '../views/example/LoginView.vue'
// import NotFoundView from '../views/example/NotFoundView.vue'
// * 静态导入是将所有组件的 js 代码打包到一起，如果组件非常多，打包后的 js 文件会很大，影响页面加载速度
// * 动态导入是将组件的 js 代码放入独立的文件，用到时才加载
// Vue.use(VueRouter)

// const routes=[
//     // 主页面
//     {
//         path:'/',
//         component: ContainerView
//     },
//     //登录页面
//     {
//         path:'/login',
//         component:LoginView
//     },
//     //404页面
//     {
//         path:'/404',
//         component:NotFoundView
//     }
// ]
//动态导入 用的时候再导
Vue.use(VueRouter)

const routes=[
    {
        path:'/',
        component:()=> import('@/views/example/ContainerView.vue'),
        name:'c',
        redirect:'c/p1',
        children:[
            {
                path:'c/p1',
                component:()=>import('@/views/example/container/P1View.vue')
            },
            {
                path:'c/p2',
                component:()=>import('@/views/example/container/P2View.vue')
            },
            {
                path:'c/p3',
                component:()=>import('@/views/example/container/P3View.vue')
            },
          
        ]
    },
    {
        path:'/login/',
        component:()=> import('@/views/example/LoginView.vue')
    },
    {
        path:'/404/',
        component:()=> import('@/views/example/NotFoundView.vue')
    },
    {
        path:'*',
        redirect:'/404'
    }
]

const router=new VueRouter({
    routes
})
export default router